<template>
  <div class="flex">
    <a-space direction="vertical">
      <a-button>Primary</a-button>
      <a-button type="primary" status="success">Primary</a-button>
      <a-button type="primary" status="warning">Primary</a-button>
      <a-button type="primary" status="danger">Primary</a-button>
      <a-button type="outline">Primary</a-button>
      <a-button type="text" status="success">Primary</a-button>
      <a-button type="primary" shape="round">Primary</a-button>
      <a-button type="primary" shape="circle">1</a-button>
      <a-button class="long" type="primary" long>long</a-button>
      <a-button type="primary" disabled>disabled</a-button>
      <a-button>disabled</a-button>

      <a-button type="primary">
        <template #icon>
          <a-icon name="jian"></a-icon>
        </template>
      </a-button>
      <a-button type="primary" shape="circle">
        <a-icon name="jian"></a-icon>
      </a-button>
    </a-space>
    <a-space direction="vertical" full>
      <a-button type="primary" long>Item1</a-button>
      <a-button type="primary" long>Item2</a-button>
      <a-button type="primary" long>Item3</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  :deep(.Button) {
    margin-bottom: 15rpx;
  }
  .long {
    width: 100%;
  }
}
</style>
